import React from 'react'
import { useStore } from 'react-immut'
import { gen } from '../common/data-gen'
import { Buttons } from '../common/buttons.jsx'
import { Table } from '../common/table.jsx'

const DATA = gen()

export default function App() {
  const [data = [], updateData] = useStore('data')
  const update = () => {
    updateData(data => {
      data[10].price = (Math.random() * 100).toFixed(2)
      data[1001].weight = (Math.random() * 100).toFixed(2)
    })
  }
  return (
    <div>
      <div>
        <Buttons onRender={() => updateData(DATA)} onUpdate={update} />
      </div>
      <div>
        <Table data={data} />
      </div>
    </div>
  )
}
